
<template>
  <div class="container">
    <van-nav-bar
      title="发票详情"
      left-text=""
      left-arrow
      :z-index=99
      @click-left="routeToPath('')"
    />
    <div class="card">
      <div class="group1 over">
        <div class="name fl">
          <van-icon name="orders-o" />商户单号：20193434343422
        </div>
        <div class="value green fr btn-success">
            下载门票
        </div>
      </div>
      <div class="group4 over" v-for="i in 2">
        <div class="name fl green">
          环球成人（儿童票）
        </div>
        <div class="key yellow fr">
          <van-icon name="eye-o" />点击查看
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant';
import { NavBar } from 'vant';
export default {
  name: 'OrdersInvoice',

  data() {
    return {
      data: ['success', 'error', 'some']
    }
  },
  components: {
    [Icon.name]:Icon,
    [NavBar.name]:NavBar,
  },
  created() {

  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
  .green{
    color: #67C23A;
  }
  .yellow{
    color: #E6A23C;
  }
  .red{
    color: #F56C6C;
  }
  .btn-success{
    border: 1px solid #67C23A;
    display: inline-block;
    border-radius: .1rem;
    color: #67C23A;
    text-align: center;
    padding: .1rem;
    font-size: .36rem;
  }
  .btn-error{
    border: 1px solid #F56C6C;
    display: inline-block;
    border-radius: .1rem;
    color: #F56C6C;
    text-align: center;
    padding: .1rem;
    font-size: .36rem;
  }
  .card{
    border: 1px solid #eee;
    padding: .3rem;
    padding-bottom: 0;
    border-radius: .3rem;
    margin: .3rem;
    margin-bottom: 0;
    .group1,.group2,.group3,.group4{
      padding-bottom: .3rem;
    }
    .group1{
      .name{
        font-size: .36rem;
        padding-top: .05rem;
      }
    }
    .key{
      float: left;
      width: 30%;
      text-align: center;
    }
    .group4 .name{

    }
    .group4 .key{
      width: 24%;
      margin: 0 auto;
      margin-left: 6%;
      text-align: center;
    }
  }
</style>

<style media="screen">
  .van-icon{
    vertical-align: middle;
    margin-top: -.05rem;
  }
</style>
